// Copyright 2018-2022 the Kubeapps contributors.
// SPDX-License-Identifier: Apache-2.0

@import "~modern-normalize/modern-normalize.css";
@import "~@cds/core/global.css"; // clarity core global styles
@import "~@cds/core/styles/theme.dark.css"; // clarity core dark theme
@import "~@cds/city/css/bundles/default.css"; // load base font
// clarity UI light/dark themes are loaded by changing <link href=...>, since they aren't prepared for theming

svg.icon {
  /* Fix positioning */
  position: relative;
  bottom: -0.125em;
}

[slot~="modal-header"] {
  color: var(--cds-global-typography-color-400, #21333b);
  font-size: var(--cds-global-typography-font-size-6, 0.55rem);
}

// CSS tweaks the dark mode theme
[cds-theme~="dark"] {
  %convert-to-white {
    filter: invert(1) brightness(100%) saturate(0%); /* stylelint-disable-line scss/no-global-function-names */
  }

  .section-not-found img {
    // White 404 logo
    @extend %convert-to-white;
  }

  .kubeapps-header-subtitle img {
    // White header subtitle Helm logo
    @extend %convert-to-white;
  }

  .bg-img img {
    // White Helm logo in card overlay
    @extend %convert-to-white;
  }
}
